<template>
    <div>
        <div class="title"> §工作人员管理</div>
        <br>
        <div class="search">
            人员搜索：<input type="text" v-model="value" :placeholder="text">
            <el-dropdown class="my_dropdown">
                <span class="el-dropdown-link">
                    类别<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu class="dropdown" slot="dropdown">
                    <el-dropdown-item @click.native="changSort(1)" style="font-size: 12px;">id搜索</el-dropdown-item>
                    <el-dropdown-item @click.native="changSort(2)" style="font-size: 12px;">昵称搜索</el-dropdown-item>
                    <el-dropdown-item @click.native="changSort(3)" style="font-size: 12px;">身份搜索</el-dropdown-item>
                    <el-dropdown-item @click.native="changSort(4)" style="font-size: 12px;">科室搜索</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <button @click="returnAll">返回</button>
            <button @click="searchInfo">搜索</button>
        </div>
        <div >
            <button @click.prevent="delData()" class="bulk-detetion">-- 批量删除</button>
            <button  @click="addInfo" class="add-info">+ 添加</button>
        </div>
        <br>
        <!-- 数据渲染 -->
        <el-table
        :data="tableData"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        style="width: 100%"
        @selection-change="selectRow">
        <el-table-column type="selection" width="45" align="center">
        </el-table-column>
        <el-table-column
            fixed
            prop="adminId"
            label="人员ID"
            type="adminId"
            width="70"
            >
            </el-table-column>
            <el-table-column
            prop="adminAccount"
            label="账号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="adminName"
            label="名称"
            width="100">
            </el-table-column>
            <el-table-column
            prop="role.roleName"
            label="所属身份"
            width="100">
            </el-table-column>
            <el-table-column
            prop="department.departmentName"
            label="所属科室"
            width="100">
            </el-table-column>
            <el-table-column
            prop="adminStatus"
            label="是否启用"
            width="80">
            <template slot-scope="scope">
                <el-switch
                    v-model="scope.row.adminStatus"
                    :active-value="1"
                    :inactive-value="2"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeStatus(scope.row)"
                >
                </el-switch>
            </template>
            </el-table-column>
            
            <el-table-column
            prop="adminUpdateTime"
            label="更新时间"
            width="160">
            </el-table-column>
            <el-table-column
            prop="adminCreateTime"
            label="创造时间"
            width="160">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="100">
                <template slot-scope="scope">
                    <el-button @click="alterClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="open(scope.row)" style="color:red" type="text" size="small">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage" 
            :page-size="page.pageSize"
            layout="prev, pager, next"
            :total="page.total"
            >
        </el-pagination>
        <!-- 修改人员内容 -->
        <el-dialog 
            title="修改人员信息" 
            :show-close="false"
            :visible.sync="dialogVisible"
            width="500px"
            >
            
            <el-form ref="form" :model="nowAdmin" label-width="80px">
                <el-form-item label="人员id:" class="custom-item">
                    <div style="float:left">{{nowAdmin.adminId}}</div>
                </el-form-item>
                <el-form-item label="人员昵称" class="custom-item">
                    <el-input v-model="nowAdmin.adminName"></el-input>
                </el-form-item>
                <el-form-item label="人员账号" class="custom-item">
                    <el-input v-model="nowAdmin.adminAccount"></el-input>
                </el-form-item>
                <el-form-item label="所属科室" class="custom-item">
                    <el-input v-model="nowAdmin.departmentName"></el-input>
                </el-form-item>
                
                <el-form-item label="所属角色" class="custom-item">
                    <el-input v-model="nowAdmin.roleName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="sureCommit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog title="添加人员" width="30%" :visible.sync="dialogFormVisible">
            <el-form  status-icon :rules="rules" ref="form" :model="form">
                <el-form-item label="账号" prop="adminAccount" :label-width="formLabelWidth">
                    <el-input v-model="form.adminAccount" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="adminPwd" :label-width="formLabelWidth">
                    <el-input v-model="form.adminPwd" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称" prop="adminName" :label-width="formLabelWidth">
                    <el-input v-model="form.adminName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份" prop="roleName" :label-width="formLabelWidth">
                    <el-input v-model="form.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属科室" prop="departmentName" :label-width="formLabelWidth">
                    <el-input v-model="form.departmentName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                    <el-radio v-model="status" label="1">是</el-radio>
                    <el-radio v-model="status" label="2">否</el-radio>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">重 置</el-button>
                <el-button type="primary" @click="addCommit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script>

export default {
    data(){
        return{
            isSearch:0,
            tableData:[],
            page:{
                currentPage: 1,  
                pageSize:5,
                total:0
            },
            dialogVisible:false,
            nowAdmin:{
                adminId:0,
                adminName:"",
                adminAccount:"",
                departmentName:"",
                roleName:""
            },
            isSearch : 0,
            value:"",
            sort:2,
            text:'根据昵称搜索',
            selectlistRow: [],
            dialogFormVisible: false,
            form:{
                adminAccount:'',
                adminPwd:'',
                adminName:'',
                departmentName:'',
                roleName:'',
            },
            status:'1',
            formLabelWidth: '80px',
            rules:{
                adminAccount:[
                    { required: true, message: '请输入账号',  trigger: 'blur' }
                ],
                adminPwd:[
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                adminName:[
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                roleName:[
                    { required: true, message: '请输入角色', trigger: 'blur' }
                ],
                departmentName:[
                    { required: true, message: '请输入所属科室', trigger: 'blur' }
                ],
            }
        }
    },
    created(){
        this.getAllAdmins();
    },
    methods:{
        getAllAdmins(){
            this.$axios.post(
                '/admin/getAdmins',
                {
                    pageCurr:this.page.currentPage,  
                    pageSize:this.page.pageSize,
                }
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        console.log("工作人员列表",res)
                        this.tableData = res.data.list
                        this.page.total = res.data.totalSize
                        console.log('tableData',this.tableData)
                        // this.getAllDepartName()
                    }
                }
            })
        },
        handleCurrentChange(newPage) {  
            // console.log(`当前页码变更为：${newPage}`);  
        //    在这里可以根据新的页码进行数据的加载或其他操作  
            this.page.currentPage = newPage; // 更新当前页码，如果需要进行页面数据更新的话  
        // 例如，你可能需要发送一个请求来获取新页码对应的数据  
            if(this.isSearch == 0){
                this.getAllAdmins();   
            }else if(this.isSearch == 1){
                // this.searchDepartInfo();
            }
        },
        changeStatus(row){
            console.log("row",row)
            this.$axios.get(
                '/admin/changeStatus',
                {
                    params:{
                        proStatus:row.adminStatus,
                        adminId:row.adminId
                    }
                }
            ).then(res=>{
                console.log("修改状态",res)
                if(res!=undefined){
                    if(res.code == 1){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            showClose: true,
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                }
            })
            
        },
        deleteAdmin(row){
            this.$axios.get(
                '/admin/deleteAdmin',
                {
                    params:{
                        adminId:row.adminId
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }else if(res.code == -1){
                        this.$message.error(res.msg);
                    }else{
                        this.$message.error("删除失败");
                    }                    
                }

                console.log("删除管理人员",res)
                this.getAllAdmins();
                // this.getAllDetailsName()
            })
        },
        open(row) {
            this.$confirm('此操作将删除该工作人员, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deleteAdmin(row);
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        },
        returnAll(){
            this.isSearch = 0,
            this.value="";
            this.getAllAdmins();
        },
        searchInfo(){
            this.isSearch = 1
            this.$axios.get(
                '/admin/selectByData',
                {
                    params:{
                        sort:this.sort,
                        value:this.value,
                        pageCurr:this.page.currentPage,  
                        pageSize:this.page.pageSize,
                    }
                }
            ).then(res =>{
                if(res != undefined){
                    console.log("人员搜索",res)
                    this.tableData = res.data
                    this.page.total = res.data.totalSize
                }
                
            })
        },
        alterClick(row) {
            this.nowAdmin.adminId = row.adminId
            this.nowAdmin.adminName = row.adminName
            this.nowAdmin.adminAccount = row.adminAccount
            this.nowAdmin.departmentName = row.department.departmentName
            this.nowAdmin.roleName = row.role.roleName
            this.dialogVisible = true
        },
        cancel(){
            this.dialogVisible = false;
            this.getAllAdmins();
        },
        sureCommit(){
            this.$axios.get(
                '/admin/alterAdmin',
                {
                    params:{
                        adminId:this.nowAdmin.adminId,
                        adminName:this.nowAdmin.adminName,
                        adminAccount:this.nowAdmin.adminAccount,
                        departmentName:this.nowAdmin.departmentName,
                        roleName:this.nowAdmin.roleName
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    console.log("修改人员信息",res)
                    if(res.code == -1){
                        this.$message({
                            showClose: true,
                            message: '暂未修改'
                        });
                    }else if(res.code == 1){
                        this.getAllAdmins();
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        })
                        this.dialogVisible = false
                    }else if(res.code == -2){
                        this.$message({
                            showClose: true,
                            message: '要修改的角色不存在',
                            type: 'error'
                        });
                    }else if(res.code == -3){
                        this.$message({
                            showClose: true,
                            message: '要修改的科室不存在',
                            type: 'error'
                        });
                    }else{
                        this.$message({
                            showClose: true,
                            message: '修改错误',
                            type: 'error'
                        });
                    }                    
                }

            })
        },
        changSort(sort){
            this.sort = sort;
            if(sort == 1){
                this.text="根据id搜索"
            }else if(sort == 2){
                this.text="根据昵称搜索"
            }else if(sort == 3){
                this.text="根据身份搜索"
            }else{
                this.text = "根据科室搜索"
            }
        },
        selectRow (val) {
            this.selectlistRow = val
        },
        delData () {
            var delAdminId = [];
            if(this.selectlistRow.length == 0){
                this.$message({
                    showClose: true,
                    message: '未选择要删除的人员'
                });
            }
            else{
                for (let i = 0; i < this.selectlistRow.length; i++) {
                    // 获取每个id---》到对应的去删除
                    let val = this.selectlistRow[i].adminId
                    delAdminId.push(val)
                    // if(i == this.selectlistRow.length-1){
                    //     delAdminId = delAdminId + val
                    // }else{
                    //     delAdminId = delAdminId + val +","
                    // }
                }
                console.log(delAdminId)
                this.$axios.post(
                    '/admin/deleteUsers',
                    {
                        ids:delAdminId
                    }
                ).then(res=>{
                    if(res!=undefined){
                        if(res.code == 1){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getAllAdmins();                       
                        }else{
                            this.$message({
                                showClose: true,
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    }
                })
            }
        },
        // 增加行
        cancelCommit(){
            this.dialogFormVisible = false;
        },
        addInfo(){
            this.dialogFormVisible=true;
        },
        addCommit(){
            this.$axios.get(
                '/admin/addCommit',
                {
                    params:{
                        adminAccount:this.form.adminAccount,
                        adminPwd:this.form.adminPwd,
                        adminName: this.form.adminName,
                        departmentName:this.form.departmentName,
                        roleName:this.form.roleName,
                        status:this.status
                    }
                }
                
            ).then(res=>{
                console.log(res)
                if(res != undefined){
                    if(res.code == 1){
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.getAllAdmins();
                        this.$refs["form"].resetFields();
                    }else if(res.code == -2){
                        this.$message.error('输入的科室名称不存在');
                    }else if(res.code == -1){
                        this.$message.error('输入的角色名称不存在');
                    }else if(res.code == -3){
                        this.$message.error('该信息已经存在');
                    }
                    else{
                        this.$message.error('添加失败！');
                    }                    
                }

            })
        },
        // 重置表单内容
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style scoped>
    @import "../../static/css/btnStyle.css"
</style>